<template>
  <div>
    <template v-if="skeletonFlag">
      <template v-if="comment?.hotComments?.length">
        <h3 class="u-hd4">精彩评论</h3>
        <CommentBox :comment="comment.hotComments" :info="info"></CommentBox>
        <br />
        <br />
      </template>
      <h3 class="u-hd4" v-if="flag">最新评论</h3>
      <CommentBox :comment="comment.comments" :info="info"></CommentBox>
    </template>
    <el-skeleton :rows="10" v-else />
    <div class="comm-f">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="num"
        :page-size="1"
        prev-text="&nbsp;﹤&nbsp;上一页&nbsp;&nbsp;&nbsp;"
        next-text="&nbsp;&nbsp;&nbsp;下一页&nbsp;﹥&nbsp;"
        @current-change="changePage"
        :hide-on-single-page="true"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { ref, inject, watch, nextTick } from "vue";
import CommentBox from "@/encapsulation/comments/CommentBox.vue";

export default {
  name: "CommentDispalyArea",
  components: { CommentBox },
  setup() {
    let flag = ref(true);
    let num = ref(12);
    let skeletonFlag = ref(false);
    let { comment, getComment, info } = inject("comment");

    watch(comment, (value) => {
      num.value = Math.ceil(value.total / 20);
      nextTick(() => {
        //  骨架图改为隐藏
        skeletonFlag.value = true;
      });
    });

    function changePage(p) {
      if (p > 1) {
        flag.value = false;
      } else {
        flag.value = true;
      }
      skeletonFlag.value = false;
      getComment(p);
    }

    return {
      changePage,
      comment,
      flag,
      num,
      skeletonFlag,
      info,
    };
  },
};
</script>

<style scoped lang="less">
.u-hd4 {
  position: relative;
  top: 1px;
  height: 20px;
  border-bottom: 1px solid #cfcfcf;
  font-size: 12px;
}
.comm-f {
  margin: 20px 0;
  display: flex;
  justify-content: center;
}
</style>
